<template>
  <up-navbar title="借款合同签署" bgColor="transparent"></up-navbar>
  <img src="../../static/bg.png" alt="" class="bg" />
  <img src="../../static/figure.png" alt="" class="bigIcon" />
  <img src="../../static/phone.png" alt="" class="phone" />
  <div class="topSitting">头部占位</div>
  <div class="banner">
    <img src="../../static/hetongqianshu_banner.png" alt="" class="bannerBg" />
    <div class="headerTitle">合同金额(元)</div>
    <div class="contractNum">
      <div class="moneyNum">{{ signInfo.contractAmount }}</div>
      <div>
        <span class="yearRate">{{ signInfo.yearRate }}</span
        >年利率
      </div>
      <div>
        <span class="loanLimit">{{ signInfo.creditTerm }}月</span>授信期限
      </div>
    </div>
    <div class="stateArea">
      <div class="stateBg"></div>
      <div class="stateItem">
        <div class="title">{{ signInfo.singlePaymentLongestTerm }}月</div>
        <div class="value">单笔用数最长期限</div>
      </div>
      <div class="stateItem">
        <div class="title">{{ signInfo.payMethod }}</div>
        <div class="value">支付方式</div>
      </div>
      <div class="stateItem">
        <div class="title">{{ signInfo.loanUse }}</div>
        <div class="value">借款用途</div>
      </div>
    </div>
  </div>
  <div class="mainArea">
    <div class="mainTitle">其他签约信息</div>
    <div class="mainItem">
      <div class="itemTitle">还款方式</div>
      <div class="itemValue">{{ signInfo.repaymentMethod }}</div>
    </div>
    <div class="mainItem">
      <div class="itemTitle">放款/还款银行卡号</div>
      <div class="itemValue itemBetweenValue">
        <div>{{ signInfo.repaymentCardNo }}</div>
        <div class="arrow"></div>
      </div>
    </div>
    <div class="mainItem">
      <div class="itemTitle">电子邮箱</div>
      <div class="itemValue">{{ signInfo.email }}</div>
    </div>
    <div class="mainItem">
      <div class="itemTitle">送达地区</div>
      <div class="itemValue itemBetweenValue">
        <div class="betweenItem">
          <div>{{ signInfo.bigAddress }}</div>
          <div class="arrow"></div>
        </div>
        <div class="betweenItem">
          <div>{{ signInfo.littleAddress }}</div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>
    <div class="mainItem">
      <div class="itemTitle">手机号</div>
      <div class="itemValue">{{ signInfo.phone }}</div>
    </div>
    <div class="agreeProtocol">
      <radio-group @change="checkEvent">
        <radio style="transform: scale(0.6)" value="true" color="#007aff" />
      </radio-group>
      <div class="agreeText">
        我已阅读并同意<span style="color: #3277f2"
          >《安徽农金“科行e贷”授信协议》《综合查询授权书》《安心签平台服务协议》</span
        >
      </div>
    </div>
  </div>
  <div class="sureSign" @click="okSign">确定签署</div>
  <div class="bottomSitting">底部占位</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
import * as utils from "../../utils/utils";
const store = useAppStore();
const signInfo = reactive({});
let fileId = "";
onMounted(() => {
  http
    .signMessage({
      orderId: store.orderId,
      creditId: store.creditId,
    })
    .then((res) => {
      signInfo.contractAmount = res.data.contractAmount;
      signInfo.yearRate = res.data.yearRate;
      signInfo.creditTerm = res.data.creditTerm;
      signInfo.singlePaymentLongestTerm = res.data.singlePaymentLongestTerm;
      signInfo.payMethod = res.data.payMethod;
      signInfo.loanUse = res.data.loanUse;
      signInfo.repaymentMethod = res.data.repaymentMethod;
      signInfo.repaymentCardNo = res.data.repaymentCardNo;
      signInfo.email = res.data.email;
      signInfo.phone = res.data.phone;
      signInfo.sendAddress = res.data.sendAddress;
      let addressList = utils.cutAdress(res.data.sendAddress);
      signInfo.bigAddress = (addressList[1] + addressList[2] + addressList[3])
        .split("undefined")
        .join("");
      signInfo.littleAddress = addressList[5];
    });
});
// 是否点击单选框
const isCheck = ref(false);
const checkEvent = (e) => {
  if (e.detail.value) {
    isCheck.value = true;
    http
      .loanContractPreview({
        orderId: store.orderId,
        bizId: store.bizId,
        bizType: "B020605",
        ...signInfo,
      })
      .then((res) => {
        if (res.code == 200) {
          store.setBorrowContractId(res.data.contractId);
          wx.setStorageSync("fileMap", res.data.fileMap);
          fileId = res.data.fileId;
        }
      });
  }
};
const okSign = () => {
  http
    .loanContractSign({
      orderId: store.orderId,
      orderNo: store.orderNo,
      bizId: store.bizId,
      bizType: "B020606",
      fileId,
      fileMap: wx.getStorageSync("fileMap"),
      contractId: store.borrowContractId,
    })
    .then((res) => {
      wx.showToast({
        title: "签署协议成功",
        mask: "true",
        icon: "none",
        duration: 1500,
      });
      setTimeout(() => {
        wx.switchTab({
          url: "../../pages/index/index",
        });
      }, 1500);
    });
};
</script>

<style scoped lang="scss">
.bottomSitting {
  height: 78rpx;
  opacity: 0;
}
.sureSign {
  margin: 92rpx 80rpx;
  width: 590rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(to right, #619df1, #4478c1);
  font-size: 32rpx;
}
.mainArea {
  margin: 29rpx 28rpx;
  padding: 32rpx 57rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 21rpx 0 0 #c2ddff;
  .mainTitle {
    margin-left: -9rpx;
    color: #131415;
    height: 33rpx;
    line-height: 33rpx;
  }
  .mainItem {
    height: 125rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    border-bottom: 1rpx solid #eeeeee;
    .itemValue {
      width: 100%;
      color: #999;
    }
    .itemBetweenValue {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .betweenItem {
        display: flex;
        align-items: center;
      }
      .arrow {
        margin-left: 30rpx;
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
      }
    }
  }
  .agreeProtocol {
    margin-top: 24rpx;
    display: flex;
    padding-bottom: 33rpx;
    .agreeText {
      font-size: 24rpx;
      line-height: 33rpx;
      color: rgba($color: #000000, $alpha: 0.45);
    }
  }
}
.banner {
  height: 248rpx;
  margin: 0 28rpx;
  position: relative;
  padding: 38rpx;
  color: #fff;
  .bannerBg {
    width: 694rpx;
    height: 324rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
  }
  .headerTitle {
    height: 33rpx;
    line-height: 33rpx;
  }
  .contractNum {
    margin-bottom: 22rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .moneyNum {
      height: 98rpx;
      line-height: 98rpx;
      font-size: 70rpx;
    }
    .yearRate,
    .loanLimit {
      font-size: 28rpx;
    }
  }
  .stateArea {
    height: 64rpx;
    position: relative;
    padding: 18rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .stateItem {
      .title {
        color: #333333;
        font-size: 26rpx;
        margin-bottom: 5rpx;
      }
      .value {
        font-size: 18rpx;
        color: #666;
      }
    }
    .stateBg {
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 85%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -999;
      border-radius: 16rpx 0rpx 16rpx 0rpx;
    }
  }
}
.topSitting {
  height: 241rpx;
  opacity: 0;
}
.bg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -999999;
}
.bigIcon {
  width: 90rpx;
  height: 113rpx;
  position: absolute;
  z-index: -99999;
  left: 534rpx;
  top: 141rpx;
}
.phone {
  width: 45rpx;
  height: 51rpx;
  position: absolute;
  z-index: -99999;
  left: 629rpx;
  top: 187rpx;
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
